<script setup>
import { ref } from "vue";
import TopButton from "@/components/Pengyq/TopButton.vue";

//  定义控制渲染店铺或商品状态
const ItpStore = ref(false);

import { closeToast, showLoadingToast } from "vant";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const value1 = ref("");
const value2 = ref("");
const value3 = ref("");
const value4 = ref("");
const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) => /1\d{10}/.test(val);

// 校验函数可以直接返回一段错误提示
const validatorMessage = (val) => `${val} 不合法，请重新输入`;

// 校验函数可以返回 Promise，实现异步校验
const asyncValidator = (val) =>
  new Promise((resolve) => {
    showLoadingToast(t("conShop.vail"));

    setTimeout(() => {
      closeToast();
      resolve(val === "1234");
    }, 1000);
  });
// 定义状态是否是修改
const addState = ref(false);
const indexAie = ref(0);
// 地址添加信息
// 零时存储地址方法
const addFrom = ref({
  name: "",
  address: "",
  phone: "",
});
// 定义初始化地址信息

const addressFrom = ref({
  name: "Jia Ke Yin",
  address: "72, Jalan Raja Dihilir, 3011 Ipoh, Perak, Malaysia  ",
  phone: "832-583-7153",
});

// 添加地址功能
const onSubmit = (values) => {
  // 有地址的情况下才添加地址
  if (addState) {
    addersList.value.push(values);
  }
  // 清空零时存储
  addFrom.value = {
    name: "",
    address: "",
    phone: "",
  };
  // 关闭弹窗
  showCenter.value = false;
};
const showCenter = ref(false);
// 定义地址列表
const addersList = ref([
  {
    address: "72, Jalan Raja Dihilir, 3011 Ipoh, Perak, Malaysia",
    name: "Jia Ke Yin",
    phone: "832-583-7153",
  },
]);
// 修改地址方法
const resAdders = (index) => {
  addState.value = true;
  showCenter.value = true;
  addFrom.value = addersList.value[index];
  addersList.value.splice(index, 1);
};

//定义修改（初始）地址方法
const handoffAdders = (index) => {
  indexAie.value = index;
  addressFrom.value = addersList.value[index];
};
</script>
 
<template>
  <!-- 顶部返回按钮 -->
  <TopButton :title="'Publish Shop'" />
  <div class="Publish_item">
    <!-- 填写信息模块 -->
    <van-form @failed="onFailed">
      <van-cell-group style="width: 370rem" inset>
        <!-- 通过 pattern 进行正则校验 -->
        <van-field
          v-model="value1"
          label="Classify/Brand"
          name="pattern"
          placeholder=""
          :rules="[{ pattern, message: $t('conShop.right') }]"
        />
        <!-- 通过 validator 进行函数校验 -->
        <van-field
          v-model="value2"
          label="Classify"
          name="validator"
          placeholder="Write down your product assortment"
          :rules="[{ validator, message: $t('conShop.right') }]"
        />
        <!-- 通过 validator 进行异步函数校验 -->
        <van-field
          v-model="value4"
          label="Brand"
          name="asyncValidator"
          placeholder="Write down your product brand"
          :rules="[{ validator: asyncValidator, message: $t('conShop.right') }]"
        />
      </van-cell-group>
      <footer>
        <div class="footer_button">
          <button>{{ $t("conShop.return") }}</button>
          <button round block native-type="submit">
            {{ $t("conShop.confirm") }}
          </button>
        </div>
      </footer>
    </van-form>
    <div class="text_main">
      <textarea
        name=""
        id=""
        cols="52"
        rows="10"
        placeholder="Add product content"
      >
      </textarea>
      <div class="perSonal_content">
        <div class="perSonal_login">+</div>
        <div class="text">{{ $t("conShop.photo") }}</div>
      </div>
    </div>
    <div class="addressCoe">
      <van-cell-group style="width: 370rem" inset>
        <van-field label="price" />
        <span>$23211</span>
        <van-cell-group style="width: 370rem" @click="ItpStore = true" insetn>
          <van-field label="Origin of shipment" class="text-end" />
          <span class="text-right">
            {{ addressFrom.address.substring(0, 15) }} ...<br />
            {{ addressFrom.name }} <br />
            {{ addressFrom.phone }} <br />
          </span>
        </van-cell-group>
      </van-cell-group>
      <!-- 弹窗功能 -->
      <van-popup
        v-model:show="ItpStore"
        closeable
        position="bottom"
        :style="{ height: '75%', backgroundColor: '#F5F5F5FF' }"
      >
        <ul class="addersList">
          <li
            v-for="(item, index) in addersList"
            :key="index"
            :class="{ border: index == indexAie }"
            @click="handoffAdders(index)"
          >
            <p class="ellipsis-2">
              {{ item.address }}
            </p>
            <div class="footer_en">
              <div class="info">
                <div class="name">{{ item.name }}</div>
                <div class="date">{{ item.phone }}</div>
              </div>
              <div class="text_right" @click="resAdders(index)">Revise</div>
            </div>
          </li>
        </ul>
        <!-- 修改地址弹窗 -->
        <van-popup v-model:show="showCenter" round>
          <van-form @submit="onSubmit">
            <van-cell-group inset>
              <van-field
                v-model="addFrom.name"
                name="name"
                :label="$t(me.addNewAddress.name)"
                :placeholder="$t(me.addNewAddress.name)"
                :rules="[
                  { required: true, message: $t('me.addNewAddress.setName') },
                ]"
              />
              <van-field
                v-model="addFrom.address"
                type="text"
                name="address"
                :label="$t(me.addNewAddress.addDetails)"
                :placeholder="$t(me.addNewAddress.addDetails)"
                :rules="[
                  {
                    required: true,
                    message: $t('me.addNewAddress.setAddress'),
                  },
                ]"
              />
              <van-field
                v-model="addFrom.phone"
                name="phone"
                type="phone"
                :label="$t('me.addNewAddress.phone')"
                :placeholder="$t('me.addNewAddress.phone')"
                :rules="[
                  { required: true, message: $t('me.addNewAddress.phone') },
                ]"
              />
            </van-cell-group>
            <div style="margin: 16rem">
              <van-button round block native-type="submit">
                {{ $t("conShop.confirm") }}
              </van-button>
            </div>
          </van-form>
        </van-popup>
        <!-- 添加按钮 -->
        <footer @click="showCenter = true">
          <div class="icon">+</div>
          {{ $t("me.addNewAddress.add") }}
        </footer>
      </van-popup>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.topBottom {
  box-sizing: border-box;
  background-color: #fff;
  padding-top: 10rem;
  display: flex;

  .title {
    font-size: 20rem;
    line-height: 50rem;
  }

  .forward {
    padding-top: 10rem;
    text-align: center;
    line-height: 38rem;
    width: 40rem;
    height: 38rem;
    border-radius: 5rem;
  }

  .back {
    margin-top: 10rem;
    margin-left: 120rem;
    color: #fff;
    padding: 0 30rem;
    border-radius: 30rem;
    height: 30rem;
    line-height: 30rem;
    background-color: #642e8eff;
  }
}

.Publish_item {
  font-size: 14rem;

  background-color: #f5f5f5;
  padding: 10rem 10rem 0 10rem;
  width: 100%;
  box-sizing: border-box;
  height: 100vh;

  .text_main {
    margin-top: 10rem;
    position: relative;

    textarea {
      border-radius: 10rem;
      resize: none;
      padding: 10rem;
      border: 0;
    }

    .perSonal_content {
      position: absolute;
      bottom: 10rem;
      left: 10rem;
      border-radius: 6rem;
      padding: 20rem 16rem;
      text-align: center;
      background-color: #ccc;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .perSonal_login {
        font-size: 20rem;
      }
    }
  }

  .addressCoe {
    :deep(.van-cell-group--inset) {
      margin: 0;
      position: relative;
      margin-top: 10rem;
    }

    :deep(.van-button) {
      background-color: #642e8eff;
      color: #fff;
      border-radius: 10rem;
    }

    span {
      font-size: 16rem;
      position: absolute;
      right: 10rem;
      top: 20rem;
      font-weight: bold;
    }

    .text-end {
      padding-bottom: 50rem;
    }

    .text-right {
      color: #ccc;
      font-weight: 500;
      text-align: right;
    }

    .van-popup--bottom {
      position: relative;
      overflow: auto;

      .addersList {
        padding-top: 40rem;

        :deep(.van-field__label) {
          width: auto;
        }

        li {
          box-sizing: border-box;
          width: 90%;
          margin: 10rem auto;
          background-color: #ffffff;
          border-radius: 10rem;
          padding: 10rem 15rem;

          p {
            width: 70%;
            font-size: 16rem;
            line-height: 30rem;
          }

          .footer_en {
            display: flex;
            justify-content: space-between;

            .info {
              color: #ccc;
              display: flex;
              font-size: 16rem;
              line-height: 30rem;

              .name {
                margin-right: 10rem;
              }
            }

            .text_right {
              padding: 8rem 10rem;
              color: #642e8eff;
              border: 1rem solid;
              border-radius: 5rem;
            }
          }

          &.border {
            border: 1rem solid #642e8eff;
          }
        }
      }

      footer {
        position: relative;
        bottom: 0rem;
        left: 10rem;
        width: 90%;
        height: 50rem;
        display: flex;
        justify-content: center;
        color: #642e8eff;
        border: 2rem solid;
        border-radius: 10rem;
        font-size: 18rem;
        align-items: center;

        .icon {
          margin-right: 10rem;
          width: 25rem;
          height: 25rem;
          text-align: center;
          line-height: 25rem;
          border: 2rem solid;
          color: #642e8eff;
          border-radius: 50%;
          font-size: 20rem;
        }
      }
    }
  }

  .van-form {
    .van-cell-group--inset {
      margin: 0;
      margin-top: 10rem;
    }
  }

  footer {
    width: 100%;
    position: absolute;
    bottom: -30rem;
    left: 0;

    .footer_button {
      width: 100%;
      height: 75rem;
      display: flex;
      justify-content: space-around;

      button {
        color: #642e8eff;
        background-color: #fff;
        width: 40%;
        height: 40rem;
        line-height: 40rem;
        border-radius: 20rem;
        text-align: center;
        border: 1rem solid;

        &:hover {
          color: #fff;
          background-color: #642e8eff;
        }
      }
    }
  }
}
</style>